<!doctype html>
<html lang="en" style="overflow:hidden;">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>{$title}</title>
	<link rel="stylesheet" href="__CSS__/style.css" />
	<script src="__STATIC__/js/jquery.js"></script>
	<script src="__JS__/scroll.js"></script>
	
</head>
<body style="background-color:#c31e26;">
	<div class="container">
			<div class="mobile-logo">
				<img src="{$path}" alt="" />
			</div>

			<div class="home-content">
				<div class="home-article">
				{$article.content|html_entity_decode}
				</div>
			</div>

			<div class="full-runking">
				<div class="title">
					<h3>捐款人</h3>
					<h3>金额</h3>
				</div>
				<div id="page" class="content-runking">
					<ul>
						<foreach name="data" item="vo">
						<li>
							<div>{$vo.nickname|ReStrLen=5}</div>
							<div>￥{$vo.money}</div>
						</li>
						</foreach>
					</ul>
				</div>
			</div>
	</div>

<div id="lanren">
<div id="audio-btn" class="on" onclick="lanren.changeClass(this,'media')">
	<audio loop="loop" src="{$music}" id="media" preload="preload"></audio>
</div>
</div>
<div class="video-play"><img src="__IMG__/video-play.png" alt=""></div>
<div class="video">
	<video controls src="__STATIC__/images/v.mp4"></video>
</div>

<include file="Public/menu" />

<script>
$(function(){
	$('#page').myScroll({
        speed: 44, //数值越大，速度越慢
        rowHeight: 50 //li的高度
    });

    $(".video").click(function(){
    	$(".video").hide();
    	$('.video video').trigger('pause');
    });
    $(".video-play").click(function(event){
    	$(".video").show();
    	lanren.puase();
    	event.stopPropagation();
    });
});
	//接收服务消息
	// $(function(){
	//   var url='ws://192.168.2.11:8000';
	//   socket=new WebSocket(url);
	//   socket.onopen=function(){log('连接成功')}
	//   socket.onmessage=function(msg){log2('获得消息:'+msg.data);console.log(msg);}
	//   socket.onclose=function(){log('断开连接')}
	// });
	// function log(var1){
	//   //alert(1);
	// }
	// function log2(var1){
	//   location.reload();
	// }

	var lanren = {
		changeClass: function (target,id) {
	       	var className = $(target).attr('class');
	       	var ids = document.getElementById(id);
	       	(className == 'on')
	           	? $(target).removeClass('on').addClass('off')
	           	: $(target).removeClass('off').addClass('on');
	       	(className == 'on')
	           	? ids.pause()
	           	: ids.play();
	   	},
		play:function(){
			document.getElementById('media').play();
		},
		puase:function(){
			document.getElementById('media').pause();
		}
	}
	lanren.play();
</script>
</body>
</html>